<template>
  <div class="login">
    <div>
      <img class="auto" src="../../assets/images/login/login-logo.png" alt="" />
      <div class="desc">让人性之光照亮生活</div>
      <div class="code-box">
        <div class="instruct">扫码登录</div>
        <div class="qr-code">
          <span v-if="!qrCode" class="el-icon-loading"></span>
          <img v-else :src="qrCode" alt="" />
          <div class="mask" @click="getQrCode" v-show="showMask">
            二维码失效，请点击刷新
          </div>
        </div>
        <div class="instruct-login">扫码关注微信公众号完成登录</div>
        <div class="box-bottom flex between align-center">
          <div class="flex align-center">
            <img src="../../assets/images/login/s-qrcode.png" alt="" />
            <a>关注视频号</a>
          </div>
          <div class="flex align-center">
            <img src="../../assets/images/login/s-qrcode.png" alt="" />
            <a href="http://www.bendibao.com/app/pc.html" target="_blank">下载本地宝App</a>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div>
        <a href="http://www.bendibao.com/culture.htm">企业文化</a> |
        <a href="http://www.bendibao.com/adservices.htm">合作加盟</a> |
        <a href="http://www.bendibao.com/about.htm">关于我们</a> |
        <a href="http://www.bendibao.com/contact.htm">联系我们</a> |
        <a href="http://www.bendibao.com/job.htm">诚聘英才</a> |
        <a href="http://www.bendibao.com/law.htm">法律顾问</a> |
        <a @click="reload">意见建议</a>
      </div>
      <div>
        <a href="http://www.bendibao.com">本地宝</a> BENDIBAO.COM 汇深网
        版权所有 2006-2021
        <a href="http://www.bendibao.com/icp.htm">ICP证：粤ICP备17055554号-1</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      qrCode: "",
      token: "",
      loginInterval: null,
      getQrInterval: null,
      url: "",
      cityname: "",
      id: "",
      showMask: false,
    };
  },
  created() {
    this.id = this.$route.query.id || "";
    this.url = this.$route.query.url || "";
    this.cityname = this.$route.query.cityname || "";
    this.getQrCode();
  },
  methods: {
    reload(){
      location.reload();
    },

    /**
     * 获取二维码
     */
    getQrCode() {
      this.$http
        .get("", {
          params: {
            controller: "fankui",
            action: "getQrCode",
          },
        })
        .then((res) => {
          if (res.data.code === 0) {
            this.showMask = false;
            this.qrCode = res.data.data.qrCode;
            this.token = res.data.data.token;
            clearInterval(this.loginInterval);
            this.loginInterval = setInterval(this.login, 2000);
            this.getQrInterval = setTimeout(() => {
              this.showMask = true;
              clearInterval(this.loginInterval);
            }, 120000);
          }
        });
    },

    login() {
      this.$http
        .get(`?controller=fankui&action=checkLogin&token=${this.token}`)
        .then((res) => {
          if (res.data.code === 0) {
            let nowTime = new Date().getTime();
            localStorage.setItem("startTime", nowTime);
            localStorage.setItem("token", this.token);
            this.showMask = false;
            clearInterval(this.loginInterval);
            if (this.id == "10") {
              location.replace(`${this.url}?token=${this.token}`);
            } else {
              if (this.cityname && this.url) {
                this.$router.replace(
                  `/?cityname=${this.cityname}&url=${this.url}`
                );
              } else {
                this.$router.replace('/');
              }
            }
          }
        });
    },
  },
};
</script>

<style scoped>
.login {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  text-align: center;
  background: url(../../assets/images/home/login-banner.png) no-repeat fixed;
}

.auto {
  margin: 2.28rem 0 0 0;
}

.desc {
  margin: 0.24rem 0 0.66rem 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.code-box {
  width: 15.2rem;
  margin: 0 auto;
  padding-top: 0.98rem;
  border-radius: 5px;
  background-color: #fff;
}

.instruct {
  color: #333;
  font-size: 0.91rem;
}
.qr-code {
  position: relative;
  width: 5.75rem;
  margin-top: 0.66rem;
  height: 5.75rem;
  margin: 0.66rem auto 0;
}
.qr-code span {
  margin: 1.5rem;
}
.qr-code img {
  width: 5.75rem;
}
.instruct-login {
  margin: 0.91rem 0 1.21rem;
  color: #333;
  font-size: 0.55rem;
}

.box-bottom {
  padding: 0.55rem 0.55rem;
  border-radius: 0 0 5px 5px;
  background-color: #f6f6f6;
}

.box-bottom div {
  font-size: 0.55rem;
  color: #0066ff;
}
.box-bottom div a{
  font-size: 0.55rem;
  color: #0066ff;
}
.box-bottom div img {
  margin-right: 0.31rem;
}

.footer {
  padding-bottom: 1rem;
  margin: 2.42rem 0 0 0;
  text-align: center;
  font-size: 14px;
  color: #fff;
}
.footer a {
  font-size: 14px;
  margin: 0 3px;
  color: #fff;
}

.mask {
  z-index: 20;
  width: 100%;
  height: 5.75rem;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 2.5rem 0 0 0;
  box-sizing: border-box;
  position: absolute;
  font-size: 16px;
  color: #fff;
  top: 0;
}
</style>